<template>
  <div class="step-two">
    <div class="ability-box">
      <div class="examinee-info">
        <div class="info-item">
          <div class="item-title">考场号</div>
          <div class="item-text">01考台</div>
        </div>
        <div class="info-item pb10">
          <div class="item-title">考生信息</div>
          <div class="item-text">姓名</div>
          <div class="item-text">张三</div>
          <div class="item-text">性别</div>
          <div class="item-text">男</div>
        </div>
        <div class="info-item">
          <div class="item-title">科目</div>
          <div class="item-text">科目一</div>
        </div>
        <div class="info-item">
          <div class="item-title">剩余时间</div>
          <div class="item-timer">40:12</div>
        </div>
      </div>
      <div class="topic-info">
        <div class="topic-large-box">
          <div class="topic-stem">
            <div class="stem-title">考试题目</div>
            <div class="stem-body">
              <div class="stem">
                3.这是题目题干这是题目题干这是题目题干这是题目题干这是题
                目题干这是题目题干这是题目题干这是题目题干
              </div>
              <div class="stem-options" v-for="(item, index) in 4" :key="index">
                {{ index }}
              </div>
            </div>
            <div class="user-option">
              <div>你选择的答案</div>
              <div class="user-op">
                <div>√</div>
                <div>×</div>
                <div>×</div>
                <div>×</div>
              </div>
            </div>
          </div>
          <div class="topic-bank">
            <div class="bank-item" v-for="(item, index) in 100" :key="index">
              <div>{{ index + 1 }}</div>
              <div>A</div>
            </div>
          </div>
        </div>
        <div class="tool-box">
          <div class="tool-item">上一题</div>
          <div class="tool-item">下一题</div>
          <div class="tool-item">读题</div>
          <div class="tool-submit" @click="tipsShow = true">交卷</div>
        </div>
      </div>
    </div>
    <div class="topic-analysis">
      <div class="topic-tool-case">
        <div>本题为判断题，请选择你认为正确的答案！</div>
        <div class="case-option">
          <img src="../../assets/select.png" alt="" />
          <div>答对自动下一题</div>
        </div>
        <div class="case-option">
          <img src="../../assets/select.png" alt="" />
          <div>答错显示技巧</div>
        </div>
        <div class="case-option">
          <img src="../../assets/select.png" alt="" />
          <div>开启语音</div>
        </div>
        <div class="case-option">
          <div>字体大小</div>
          <div class="case-options">
            <img src="../../assets/select.png" alt="" />
            <div>大</div>
          </div>
          <div class="case-options">
            <img src="../../assets/select.png" alt="" />
            <div>中</div>
          </div>
          <div class="case-options">
            <img src="../../assets/select.png" alt="" />
            <div>小</div>
          </div>
        </div>
      </div>
      <div class="analysis-box">
        <div class="analysis-info f2">
          <div class="analysis-title">图片信息</div>
          <div class="analysis-img">
            <img src="../../assets/keer.png" alt="" />
          </div>
        </div>
        <div class="analysis-info f1">
          <div class="analysis-title">技巧讲解</div>
          <div class="analysis-txt">
            题目解析包含法律条文，题目解析包含法律条文题目解析包含
            法律条文题目解析包含法，律条文题目解析包含法律条文题目
            解析包含法律条文题目解析包含法律条。
          </div>
        </div>
      </div>
    </div>
    <div class="popups-box" v-if="tipsShow">
      <div class="popups-body">
        <div class="tips-text">
          点击【确认交卷】，将提交考试成绩，结束考试！<br/>
          点击【继续考试】，将关闭本次窗口，继续考试！
        </div>
        <div class="btn-box">
          <div class="green" @click="tipsShow = false">继续考试</div>
          <div @click="handlePaper">确认交卷</div>
        </div>
        <img
          class="exit-btn"
          src="../../assets/EXIT.png"
          alt=""
          @click="tipsShow = false"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tipsShow: false,
    };
  },
  methods:{
    handlePaper(){
      this.$emit('getSteps', 1)
    }
  }
};
</script>

<style lang="scss" scoped>
.pb10 {
  padding-bottom: 15vh;
}
.ability-box {
  width: 100%;
  margin-top: 5vh;
  display: flex;

  .examinee-info {
    margin-right: 1vw;
    flex: 1;
    display: flex;
    flex-direction: column;
    // align-content: center;
    border: 1px solid #e6e6e6;

    .info-item {
      > div {
        text-align: center;
        padding: 1.5vh 3vw;
      }

      .item-title {
        color: #2ac092;
        border-bottom: 1px solid #e6e6e6;
        border-top: 1px solid #e6e6e6;
      }
      .item-timer {
        color: #ff6d6b;
        font-size: 1.2vw;
      }
    }
  }

  .topic-info {
    flex: 6;
    .topic-large-box {
      display: flex;
      width: 100%;
      height: 80%;

      .topic-stem {
        // height: 100%;
        border: 1px solid #e6e6e6;
        margin-right: 1vw;
        flex: 1;
        position: relative;

        .stem-title {
          padding: 1.5vh 1vw;
          border-bottom: 1px solid #e6e6e6;
          color: #2ac092;
        }

        .stem-body {
          padding: 1vh 1vw;
          .stem {
            line-height: 2;
          }
          .stem-options {
            margin-bottom: 1vh;
          }
        }
        .user-option {
          position: absolute;
          bottom: 2vh;
          left: 2%;
          display: flex;
          justify-content: space-between;
          align-content: center;
          width: 96%;
          font-size: 0.9vw;

          > div:nth-child(1) {
            display: flex;
            align-items: center;
          }

          .user-op {
            display: flex;

            > div {
              padding: 1.2vh 0.8vw;
              background-color: #f5f5f5;
              margin-left: 1vw;
              cursor: pointer;
            }
          }
        }
      }

      .topic-bank {
        flex: 1;
        // border: 1px solid #e6e6e6;
        display: flex;
        flex-wrap: wrap;

        .bank-item {
          width: 9.66%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          user-select: none;
          border: 1px solid #e6e6e6;
        }
      }
    }
    .tool-box {
      display: flex;
      height: 20%;
      align-items: center;

      .tool-item,
      .tool-submit {
        padding: 1vh 1.8vw;
        border: 1px solid #e6e6e6;
        border-radius: 25px;
        width: 3vw;
        text-align: center;
        margin-right: 1vw;
        cursor: pointer;
      }
      .tool-item:hover {
        border: 1px solid #2ac092;
        color: #2ac092;
      }
      .tool-submit:hover {
        background: linear-gradient(180deg, #66ccad, #2ac092);
        color: #fff;
        border: none;
      }
    }
  }
}
.topic-analysis {
  margin-top: 2vh;
  border: 1px solid #e6e6e6;

  .topic-tool-case {
    display: flex;
    padding: 1vh 1vw;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    img {
      width: 1vw;
      height: 2vh;
      margin-right: 0.5vw;
    }

    .case-option {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 3vw;
    }
    .case-options {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 1vw;
    }
  }
  .analysis-box {
    display: flex;

    .analysis-info {
      padding: 1vh 1vw;

      .analysis-title {
        font-size: 0.9vw;
        font-weight: bold;
        margin-bottom: 2vh;
      }
    }

    .f1 {
      flex: 1;
      border-left: 1px solid #e6e6e6;
    }
    .f2 {
      flex: 2;
      margin-right: 2vw;
      border-right: 1px solid #e6e6e6;
    }
  }
}
.popups-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2086;
  background-color: rgba(127, 127, 127, 0.6);

  .popups-body {
    width: 20vw;
    height: 25vh;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tips-text {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #333333;
      font-size: 0.9vw;

      img {
        width: 2.2vw;
        height: 4.5vh;
      }
      .num {
        > span {
          font-size: 1.2vw;
          color: #2ac092;
        }
      }
    }

    .btn-box {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      color: #666666;
      > div {
        cursor: pointer;
        height: 100%;
        border: 0.5px solid #e6e6e6;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .green {
        color: #2ac092;
      }
    }

    .exit-btn {
      position: absolute;
      cursor: pointer;
      top: 2vh;
      right: 1vw;
      width: 1.2vw;
      height: 2.5vh;
    }
  }
}
</style>